<template>
  <div class="cardList" ref="content" v-masonry transition-duration="0.25s" columnWidth=".infocard" item-selector=".infocard">
    <infoCard class="infocard"  :id="item.id" :Info="item" v-masonry-tile v-for="(item) in list" :key="item.id"
      @click="toDetail(item.id)" @scroll="handleScroll"></infoCard>
  </div>
</template>

<script setup lang='ts'>
import { card } from '@/model';
import infoCard from './infoCard.vue';
import { useRouter } from 'vue-router';
import { ref } from 'vue';
defineProps({
  list: {
    type: Array<card>,
    default: []
  }
})
const content=ref<HTMLElement | null>(null);
const router = useRouter()
const toDetail = (id:string) => {
  router.push({
    path: '/detailInfo',
    query: {
      id:id
    }
  })
}
const handleScroll=()=>{

}
</script>

<style lang='less' scoped>
.cardList {
  width: 100%;
  padding-left: 0.8rem;
  box-sizing: border-box;
  padding-bottom: 3.375rem;
}
</style>
